<script setup>
  import AMap from '@/components/AMap/AMap.vue';
  import api from '@/api/index.js'
  import { ref } from 'vue'

  const props = defineProps({
    point: {
      type: Array,
      default: [106.333819, 25.914944]
    }
  })
  const show = ref(false)
  const title = ref('地图预览')
  const open = () => {
    show.value = true
  }

  // 获取区域经纬度数据
  const drawPoint = () => {

    let marker = new curAMap.Marker({
      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      position: props.point,
      offset: new curAMap.Pixel(-13, -30)
    });
    marker.setMap(curMap);

    curMap.setFitView()
  }

  // 地图加载完成回调函数
  let curAMap = null
  let curMap = null
  const mapInit = (AMap, map) => {
    curAMap = AMap
    curMap = map
    drawPoint()
  }

  defineExpose({ open })
</script>

<template>
  <a-modal v-model:open="show" :title="title" style="width: 1200px;" destroyOnClose>
    <div style="height: 800px;">
      <AMap :mapInit="mapInit" />
    </div>
    <template #footer>
      <a-button @click="show = false">关闭</a-button>
    </template>
  </a-modal>
</template>